<template>
  <div class="annual-fee-box">
    <dropdown-top></dropdown-top>
    <div class="line-box"></div>


    <div class="installment-item">
      <div class="item-box" @click="billCardFlag = !billCardFlag">
        <div class="divs item-left">付款账户</div>
        <div class="divs item-right">
          <p>￥{{ cardNum | formatCard }}</p>
          <img src="@icon/arrow-b.png" alt=""/>
        </div>
      </div>
      <div class="balance-box">
        余额：¥{{ balance }}
      </div>
    </div>


    <div class="line-box"></div>
    <div class="installment-item">
      <div class="item-box">
        <div class="divs item-left">约定还款方式</div>
        <div class="divs item-right" @click="paymentFlag = !paymentFlag">
          <span>全款</span>
          <img src="@icon/arrow-b.png" alt=""/>
        </div>
      </div>
    </div>
    <div class="installment-item">
      <div class="item-box">
        <div class="divs item-left">还款资金来源</div>
        <div class="divs item-right">
          <p>账户活期余额</p>
        </div>
      </div>
    </div>
    <div class="installment-item">
      <div class="item-box">
        <div class="divs item-left">还款账户密码</div>
        <div class="divs item-right">
          <input type="text" v-model="passWord" placeholder="请输入账户密码">
        </div>
      </div>
    </div>
    <div class="line-box"></div>
    <div class="tips">
      <p>温馨提示</p>
      <p>1.还款账户必须是您本人名下的农业银行 I 类户、II类户，且还款账户与信用卡的开户证件类型、证件号码以及用户名必须完全一致。其中，II类户自扣金额受日交易额限额1万、年交易限额20万影响。 </p>
      <p>2.申请“约定还款”功能成功后次日生效，如果在当月的到期还款期日之前您的自动还款设置（包括金额、账号等）有变更，将以变更结果为准。</p>
    </div>
    <!--    约定还款开通按钮-->
    <div class="staging-box" v-if="agreedRepaymentFlag" @click="payNow()">{{agreedRepaymentTxt}}</div>
    <!--    约定还款设置按钮-->
    <div class="bottom-button" v-else>
      <div class="left-button" @click="deleteDialog()">
        取消约定还款
      </div>
      <div class="right-button" @click="editRepayment">
        修改约定还款
      </div>
    </div>

    <!--  卡号选择  -->
    <van-popup
        v-model="billCardFlag"
        closeable
        close-icon-position="top-left"
        position="bottom"
        :style="{ 'min-height': '17%' }"
    >
      <div class="info-list">
        <h3>付款账户</h3>
        <van-radio-group v-model="radio">
          <van-cell-group>
            <van-cell clickable @click="radio = index" v-for="(item,index) in 2" :key="index">
              <div class="left-box">
                <div class="card-head__logo">
                  <img src="@icon/logo-g.png" alt=""/>
                </div>
                <div class="card-box">
                  <p>{{ cardNum |  formatCard }}</p>
                  <p class="text-gray">可用余额： ¥{{ balance }}</p>
                </div>
              </div>
              <template #right-icon>
                <van-radio checked-color="#00B893" :name='index'/>
              </template>
            </van-cell>

          </van-cell-group>
        </van-radio-group>
        <div class="bank-card-box">
          <div class="item" @click="_goPage('addCard')">
            <span class="span-text">添加本行借记卡</span>
            <div class="card-right__logo">
              <img src="@icon/arrow-b.png" alt=""/>
            </div>
          </div>
        </div>
        <div class="bank-card-box">
          <div class="item" @click="deleteCard">
            <span class="span-text">删除借记卡</span>
            <div class="card-right__logo">
              <img src="@icon/arrow-b.png" alt=""/>
            </div>
          </div>
        </div>
      </div>
      <div class="staging-box" @click="_goPage('paymentSuccess',{type:'agreed',cardNum:cardNum})">确定</div>

    </van-popup>

    <!--  信息确认  -->
    <van-popup
        v-model="paymentFlag"
        closeable
        close-icon-position="top-left"
        position="bottom"
        :style="{ 'min-height': '17%' }"
    >
      <div class="info-list">
        <h3>开通约定还款</h3>
        <p>
          <span>付款账户</span>
          <span>{{ cardNum |  formatCard }}</span>
        </p>
        <p>
          <span>付款金额</span>
          <span>全额</span>
        </p>

      </div>
      <div class="staging-box" @click="_goPage('paymentSuccess',{type:'agreedSet',cardNum:cardNum})">确定开通自动还款</div>

    </van-popup>
    <!--  还款约定  -->
    <van-popup
        v-model="infoConfirmFlag"
        closeable
        close-icon-position="top-left"
        position="bottom"
        :style="{ 'min-height': '17%' }"
    >
      <div class="info-list">
        <h3>还款详情</h3>
        <p>
          <span>付款账户</span>
          <span>{{ cardNum |  formatCard }}</span>
        </p>
        <p>
          <span>还款账户</span>
          <span>{{ cardNum |  formatCard }}</span>
        </p>
        <p>
          <span>还款金额</span>
          <span>¥{{ total }}</span>
        </p>
      </div>
      <div class="staging-box" @click="_goPage('paymentSuccess',{type:'agreed',cardNum:cardNum})">确定</div>

    </van-popup>
  </div>
</template>

<script>
import {Random} from "mockjs";
import {globalMethods} from "../common/mixins.js";
import dropdown from "@comp/dropdown";
import dropdownMenu from "@comp/dropdown/dropdownMenu";
import dropdownTop from "@comp/dropdownTop";
import text from './text'

export default {
  name: "annualFee",
  mixins: [globalMethods],
  data() {
    return {
      //判断是修改还是设置
      agreedRepaymentFlag:false,
      agreedRepaymentTxt:'确定开通约定还款',
      passWord: '',
      billCardFlag: false,
      radio: '1',
      infoConfirmFlag: false,
      paymentFlag: false,
      cardNum: Random.string("number", 12),
      total: Random.natural(10, 100),
      residue: Random.natural(10, 100),
      balance: Random.natural(10, 100),
      date: Random.date("yyyy/MM/dd"),
      year: Random.date("yyyy"),
      bankCardList: [
        {cardNumber: "6688****6088"},
        {cardNumber: "6688****6088"},
        {cardNumber: "6688****6088"},
        {cardNumber: "6688****6088"}
      ],
      dropDownFlag: false,
      billSelect: 0,
      paymentList: [
        {leftTitle: '全额还款', money: Random.natural(10, 1000)},
        {leftTitle: '最低还款', money: Random.natural(10, 100)},
        {leftTitle: '自定义还款', money: Random.natural(10, 1000), showInput: true}
      ],
      text: text

    };
  },
  components: {
    dropdown,
    dropdownMenu,
    dropdownTop
  },
  created() {
  },
  methods: {
    editRepayment(){
      this.agreedRepaymentFlag = !this.agreedRepaymentFlag
      this.agreedRepaymentTxt = '确认修改'
    },
    showDialog() {
      this.$dialog.alert({
        confirmButtonColor: '#FFA900',
        title: '温馨提示',
        message: `${this.text}`,
      })
          .then(() => {
            // on confirm

          })
    },
    deleteDialog() {
      this.$dialog.confirm({
        confirmButtonColor: '#FFA900',
        title: '温馨提示',
        message: `确定取消信用卡 ${this.cardNum} 约定还款设置吗？`,
      })
          .then(() => {
            // on confirm
            this.$toast({
              message: '删除成功',
              position: 'bottom',
            });
          })
          .catch(() => {
            // on cancel
          });
    },
    deleteCard() {
      this.$dialog.confirm({
        confirmButtonColor: '#FFA900',
        title: '温馨提示',
        message: `确定删除付款账户（卡号:${this.cardNum}）吗？`,
      })
          .then(() => {
            // on confirm
            this._goPage('deleteSuccess')
          })
          .catch(() => {
            // on cancel
          });
    },
    close(e) {
      this.dropDownFlag = e;
    },
    payNow() {
      this.infoConfirmFlag = !this.infoConfirmFlag
    }
  }
};
</script>

<style lang="stylus" scoped>

.left-box
  display flex
  align-items center

  .card-head__logo
    width 48px
    height 48px

  .card-box
    //padding-left 32px
    width 100%

    p
      border none
      height auto

.info-list
  h3
    font-weight: 400
    display flex
    align-items center
    justify-content center
    height 100px
    color #666
    border-bottom 1px solid #E6E6E6

  p
    margin 0 30px
    display flex
    align-items center
    height 90px
    color #333333
    font-size 32px
    border-bottom 1px solid #E6E6E6
    justify-content space-between

  .bank-card-box
    .item
      border-bottom 1px solid #ededed

      .card-right__logo
        width 48px

.dropdown-menu
  top 0

.annual-fee-box
  display flex
  width 100%
  flex-direction column
  background #F7F7F7
  min-height 100vh
  color #333

  .bank-card-box
    position relative
    background #fff
    font-size 32px

    .item
      display flex
      align-items center
      padding 0 27px 0 33px
      height 90px
      color #333333

      .span-text
        flex 1

        &.active
          color #07B7A0

  .card-right__logo
    width 128px
    height 48px
    display flex
    justify-content center
    margin-left 16px
    color #999999

    img
      width 48px
      height 100%

    .img2
      width 22px
      height 16px

  .line-box
    height 20px
    background #F7F7F7

.divider-box
  background #fff
  display flex
  color #07B7A0
  font-size 32px
  align-items center
  line-height 24px
  border-color #07B7A0
  border-style solid
  border-width 0
  padding 30px 200px

  p
    position relative
    display flex
    align-items center
    justify-content center
    padding 0 30px

    &:after
      content ''
      position absolute
      width 12px
      height 12px
      border-radius 50%
      left 6px
      background #00B893

    &:before
      content ''
      position absolute
      width 12px
      height 12px
      border-radius 50%
      right 6px
      background #00B893

  &:after
    content ''
    display block
    -webkit-box-flex: 1
    -webkit-flex: 1
    flex: 1
    box-sizing: border-box
    height: 1px
    border-color: inherit
    border-style: inherit
    border-width: 1px 0 0

  &:before
    content ''
    display block
    -webkit-box-flex: 1
    -webkit-flex: 1
    flex: 1
    box-sizing: border-box
    height: 1px
    border-color: inherit
    border-style: inherit
    border-width: 1px 0 0

.standard-box
  background #fff
  display flex
  justify-content center
  align-items center
  font-size 32px
  padding: 30px 0

  .s-b
    display flex
    flex-direction column
    align-items center
    width 100%

    p
      &:last-of-type
        padding-top 30px
        font-size 26px
        color #999

  .s-l-1
    border-right 1px solid #E6E6E6

    .top-t
      color #00B893

      span
        &:first-of-type
          font-size 58px
          margin-right 15px

  .s-r-1
    .top-t
      height 64px
      display flex
      align-items center


.installment-item
  background #fff
  display flex
  flex-direction column
  font-size 32px
  min-height 90px
  padding 0 30px
  color #333

  .item-box
    height 90px
    display flex
    justify-content space-between
    align-items center
    border-bottom 1px solid #E6E6E6

    .item-right
      display flex

      img
        width 48px
        height 100%

      input
        outline none
        border 0
        text-align right

    .right-text
      color #666666

    .discount-box
      margin-left 16px
      font-size 26px
      color #00B893
      display flex
      height 40px
      padding 0 11px
      background #FFFFFF
      border 2px solid #00B893
      border-radius 20px
      align-items center
      justify-content center

  .balance-box
    font-size 28px
    display flex
    align-items center
    justify-content flex-end
    height 64px
    color #666666
    padding 18px 0

.protocol-box
  display flex
  align-items center
  padding 30px 34px
  font-size 28px
  background #f7f7f7

.tips
  background #fff
  font-size 28px
  padding 30px

  p
    line-height 1.5

.staging-box
  display flex
  width 686px
  height 88px
  background #FFA900
  border-radius 8px
  color #fff
  font-size 36px
  align-items center
  justify-content center
  margin 30px auto

/deep/ .van-radio__label
  width 100%


/deep/ .van-radio__icon
  align-self flex-start
  margin-top 26px

.payment-list
  display flex
  flex-direction column
  padding 0 30px
  background #fff

  .installment-item
    padding 0

  .installment-item .item-box
    border 0

  .balance-box
    color #00B893
    font-size 24px

    p
      display flex
      align-items center

.bottom-button
  position fixed
  bottom 0
  left 0
  width 100%
  height 88px
  background #FFFFFF
  border 1px solid #E5E5E5
  display flex
  align-items center
  font-size 34px
  color #FFA900

  div
    flex 1
    display flex
    justify-content center
    align-items center
    height 100%

  .right-button
    background #FFA900
    color #fff
.other-bill-box
  display flex
  justify-content center
  color #00B893

  .item
    color #00B893 !important

  .span-text
    flex none !important

  .card-right__logo
    width 48px
</style>
